<template>
    <div>
        <div class='addBrand'>
            <h3>新增渠道</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="渠道名称:" prop="channelName">
                    <el-input class='input' v-model="ruleForm.channelName"></el-input>
                </el-form-item>
                <el-form-item label="渠道编号:" prop="channel">
                    <el-input class='input' v-model="ruleForm.channel"></el-input>
                </el-form-item>
                <el-form-item label="渠道状态:" prop="status">
                    <!-- <el-switch  v-model="status"> {{ruleForm.status =status ==true ? 1 : 0}}</el-switch> -->
                    <el-checkbox v-model="status">{{status ? '有效': '无效'}}</el-checkbox>
                </el-form-item>
                <el-form-item class='right-btn'>
                    <el-button class='' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button class='' type="primary" @click="goBack('ruleForm')">返回</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import { addChannel } from "../../data/postData";
export default {
    data() {
        return {
            ruleForm: {
                channelName: "",
                channel: "",
                status: ""
            },
            status: true,
            imageUrl: "",
            uploadLoading: false,
            files: "",
            rules: {
                channelName: [
                    { required: true, message: "填写渠道名称", trigger: "blur" }
                ],
                channel: [
                    { required: true, message: "填写渠道编号", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        submitForm() {
            if (this.status == true) {
                this.ruleForm.status = "1";
            } else {
                this.ruleForm.status = "0";
            }
            var params = {
                data: {
                    channelName: this.ruleForm.channelName,
                    channel: this.ruleForm.channel,
                    status: "" + this.ruleForm.status
                }
            };
            if (
                this.ruleForm.channelName == "" ||
                this.ruleForm.channelName == null
            ) {
                this.$message({
                    message: "渠道名称不能为空",
                    type: "warning",
                    duration: 1500
                });
            } else if (
                this.ruleForm.channel == "" ||
                this.ruleForm.channel == null
            ) {
                this.$message({
                    message: "渠道编号不能为空",
                    type: "warning",
                    duration: 1500
                });
            } else {
                this.$confirm("确认添加？").then(_ => {
                    this.$fetch
                        .post(addChannel, params)
                        .then(res => {
                            console.log(res.data);
                            this.$message({
                                message: res.message,
                                type: "success",
                                duration: 1000
                            });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);
                        })
                        .catch(err => {
                            this.$message({
                                message: err.message,
                                type: "warning",
                                duration: 1000
                            });
                        });
                });
            }
        },
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>
<style scoped lang="less">
.addBrand {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
    .input {
        width: 50%;
    }
}
.avatar-uploader {
    height: 200px;
    width: 200px;
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.el-upload {
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid green;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.right-btn {
    position: absolute;
    right: 10%;
}

.prevImg {
    position: relative;
    display: inline-block;
    & + .prevImg {
        margin-left: 10px;
    }
    img {
        margin-top: 15px;
    }
    i {
        cursor: pointer;
    }
    i.el-icon-error {
        position: absolute;
        right: -8px;
        top: 4px;
        font-size: 20px;
        color: #ec5051;
        cursor: pointer;
    }
    i.el-icon-back {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        color: #409eff;
    }
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    span {
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
}
</style>
